<template>
  <div class="adminList">
    <!-- 模糊查询 -->
    <div class="container">
      <header>
        <!-- 添加账号 -->
        <div>
          <Button @click="add" type="info">
            <i
              class="iconfont icon-add"
              style="font-size: 14px; margin-right: 5px"
            ></i>
          </Button>
        </div>
        <div>
          <Input
            placeholder="请输入单位名称进行查询"
            class="w-input"
            v-model.trim="searchKey"
            @on-keyup.enter="loadUserData(this.searchKey)"
            clearable
            @on-clear="loadUserData('')"
          />
          <Button
            type="primary"
            icon="ios-search"
            @click="loadUserData(this.searchKey)"
          ></Button>
          <!-- <Button type="primary" @click="branch">批量导入</Button> -->
        </div>
      </header>
      <!-- 列表 -->
      <div class="list">
        <Table :columns="list" :data="data1" stripe></Table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <Page
          :total="count"
          :current="pageNo"
          :page-size="pageSize"
          show-total
          show-elevator
          @on-change="loadPage"
          v-show="!flag"
        />
      </div>
      <!-- 账号新增弹窗 -->
      <Modal v-model="addModal" title="账号新增" width="660px" footer-hide>
        <add @showaddModal="showaddModal" />
      </Modal>
      <!-- 账号编辑弹窗 -->
      <Modal v-model="editModal" title="账号编辑" width="660px" footer-hide>
        <edit @showeditModal="showeditModal" ref="child1" />
      </Modal>
    </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import add from "./components/add";
import edit from "./components/edit";
export default {
  components: {
    add,
    edit
  },
  data() {
    return {
      addModal: false,
      editModal: false,
      count: 0,
      pageNo: 1,
      pageSize: 10,
      searchKey: "",
      data1: [],
      list: [
        {
          title: "ID",
          key: "id",
          align: "center",
          width: 170,
        },
        {
          title: "单位名称",
          key: "unitName",
          align: "center",
          width: 200,
        },
        {
          title: "单位地址",
          key: "unitAddress",
          align: "center",
        },
        {
          title: "联系人",
          key: "contacts",
          align: "center",
        },
        {
          title: "手机号",
          key: "phone",
          align: "center",
        },
        {
          title: "添加时间",
          key: "createTime",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 100,
          render: (h, params) => {
            let status = params.row.status,
              btnText = "";
            if (status == 0) {
              btnText = "启用";
            } else {
              btnText = "禁用";
            }
            return h("span", {
              domProps: {
                innerHTML: btnText,
              },
            });
          },
        },
        {
          title: "设置",
          key: "operate",
          align: "center",
          width: 280,
          render: (h, params) => {
            let id = params.row.id;
            return [
              h(
                "Button",
                {
                  attrs: {
                    href: "javascript:void(0);",
                  },
                  style: {
                    color: "#5362e1",
                    margin: "0px 6px",
                    border: "0px",
                    background: "none",
                  },
                  on: {
                    click: () => {
                      this.editBanner(id);
                    },
                  },
                },
                "修改"
              ),
              // "|",
              // h(
              //   "span",
              //   {
              //     attrs: {
              //       href: "javascript:void(0);",
              //     },
              //     style: {
              //       color: "#21c780",
              //       margin: "0px 6px",
              //     },
              //     on: {
              //       click: () => {
              //         this.deploy(id);
              //       },
              //     },
              //   },
              //   "删除"
              // ),
            ];
          },
        },
      ],
    };
  },
  mounted() {
    // 预加载数据
    this.loadUserData(this.searchKey);
  },
  methods: {
    // 请求数据
    loadUserData(val) {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        unitName: val,
      };
      this.$axios.post(api.getSigningUnit, params).then((res) => {
        if (res.data.code === 1) {
          let ret = res.data.object;
          this.count = ret.total;
          if (ret.records) {
            this.data1 = ret.records;
          }
        } else {
          this.$Message.info("查询失败" + res.message);
        }
      });
    },
    // 添加角色
    add() {
      this.addModal = true;
    },
    editBanner(id) {
      console.log('this.$refs.child1',this.$refs.child1);
      
      this.$refs.child1.editBanner(id);
      this.editModal = true;
    },
    showaddModal() {
      this.addModal = false;
      this.loadUserData('');
    },
    //父组件关闭弹窗
    showeditModal() {
      this.editModal = false;
      this.loadUserData('');
    },
  },
};
</script>
<style lang="less" scoped>
.adminList {
  padding: 10px;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin: 0 auto;
    header {
      width: 100%;
      height: 40px;
      display: flex;
      .w-input {
        width: 250px;
        margin: 0 10px;
      }
    }
    .list {
      width: 100%;
      margin: 10px 0;
    }
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
}
/deep/ .ivu-modal-wrap {
  .ivu-modal {
    float: right !important;
    background-color: #fff;
    border-radius: 10px;
    top: 0px;
    height: 100%;
    overflow-x: hidden;
  }
  .btn-group {
    padding-top: 10px;
    text-align: center;
    .left {
      margin-right: 20px;
    }
    .right {
      margin-left: 20px;
    }
  }
  .content {
    text-align: center;
    .tip {
      padding-bottom: 10px;
    }
  }
}
</style>
